<!-- @format -->

<template>
  <!-- 下拉选择框 -->
  <el-select :popper-append-to-body="false" class="nuSelect" v-bind="$attrs" v-on="$listeners">
    <!-- 下拉选项 -->
    <el-option v-for="item in list" :key="item.value" :label="item[label]" :value="item[valueName]"
      :disabled="item.disabled ? true : false"></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    /* 传入下拉菜单 */
    list: {
      type: Array,
      default: () => [],
    },
    valueName: {
      type: String,
      default: () => "value",
    },
    label:{
      type: String,
      default: () => "label",
    }
    
  },
};
</script>
<style scoped>
/* 下拉选择框外部容器样式 */
.el-select {
  /* box-shadow: var(--select-box-shadow); */
  /* width: 100%; */
  width: 160px;
  /* height: 30px; */
}

.el-select-dropdown__item {
  text-align: left;
}

/* 被选中的选项样式 */
.el-select-dropdown__item.selected {
  color: var(--select-selected) !important;
}

/* 聚焦选项的样式 */
.el-select-dropdown__item:hover {
  background-color: var(--select-hover) !important;
}

/* 选择框聚焦样式 */
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--select-selected) !important;
}

::v-deep .el-input__inner {
  /* border-radius: 2px; */
  /* border: 1px solid #adb0b8; */
  border: var(--input-border) !important;
  background-color: var(--input-bgc) !important;
  color: var(--input-color) !important;
}

::v-deep .el-select-dropdown__wrap.el-scrollbar__wrap {
  margin-bottom: 0px !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: var(--input-disabled-color) !important;
  cursor: not-allowed !important;
  background-color: var(--input-disabled-bgc) !important;
}
</style>
